<template>
  <body>
  <div class="background">
    <img src="static/background.jpg" width="100%" height="100%" alt=""/>
  </div>
  <el-page-header @back="goBack" content="信息编辑" style="margin-top: -2%">
  </el-page-header>
  <div>
    <el-card class="card">
      <H2>用户信息</H2>
      <el-form autocomplete="on"
               :model="User"
               ref="User"
               label-position="left"
               :rules="rules">
        <el-form-item style="margin-top: 5%" prop="CustomerId">
          <el-input name="CustomerId"
                    v-model="User.CustomerId"
                    autocomplete="on"
                    disabled
                    style="font-size: 18px"
                   >
            <template slot="prepend"><div style="color: #0e0d0c;width: 55px;font-size: 18px">用户名</div></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="UserName">
          <el-input name="UserName"
                    v-model="User.UserName"
                    autocomplete="on"
                    placeholder="请输入姓名"
                    style="font-size: 18px">
            <template slot="prepend"><div style="color: #0e0d0c;width: 55px;font-size: 18px">姓名</div></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="PhoneNumber">
          <el-input name="PhoneNumber"
                    v-model="User.PhoneNumber"
                    autocomplete="on"
                    placeholder="请输入电话号码"
                    style="font-size: 18px">
            <template slot="prepend"><div style="color: #0e0d0c;width: 55px;font-size: 18px">电话号码</div></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="Address">
          <el-input name="Address"
                    v-model="User.Address"
                    autocomplete="on"
                    placeholder="请输入地址"
                    style="font-size: 18px">
            <template slot="prepend"><div style="color: #0e0d0c;width: 55px;font-size: 18px">地址</div></template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            style="background: darkslateblue;font-size: 18px"
            type="primary"
            @click.native.prevent="add"
          >修改
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
  </body>
</template>

<script>
  export default {
    data() {
      return {
        User: {
          CustomerId: '',
          PassWord: '',
          UserName: '',
          PhoneNumber: '',
          Address: '',
          Balance: '',
          Power: ''
        },
        rules: {
          CustomerId: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
          UserName: [{required: true, message: '姓名不能为空', trigger: 'blur'}],
          PhoneNumber: [{required: true, message: '电话号码不能为空', trigger: 'blur'}],
          Address: [{required: true, message: '地址不能为空', trigger: 'blur'}],
          Balance: [{required: true, message: '余额不能为空', trigger: 'blur'}],
        },
      };
    },
    created() {
      this.User.CustomerId=this.$route.query.user.customerId;
      this.User.UserName=this.$route.query.user.userName;
      this.User.PhoneNumber=this.$route.query.user.phoneNumber;
      this.User.Address=this.$route.query.user.address;
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      add() {
        this.$refs.User.validate(valid => {
          if (valid) {
            this.$confirm('是否确认修改？', '提示', {
            }).then(() => {
              this.$axios.post('/user/updateU1', this.User)
                .then(resp => {
                  if(resp.data.code==200){
                    this.$alert("修改成功!", '提示', {
                      confirmButtonText: '确定'
                    });
                    this.goBack();
                  }
                });
            }).catch(() => { this.$message({
              message: '取消修改',
              type: 'failed'
            })});
          } else {
            // eslint-disable-next-line no-console
            console.log("参数验证不合法！");
            return false;
          }
        });
      },
    }
  };
</script>

<style scoped>
  .background {
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    z-index: -1;
    position: fixed;
  }

  .card {
    position: relative;
    width: 675px;
    margin-top: 7%;
    margin-left: 30%;
    padding: 1em;
    background: hsla(0, 0%, 50%, .25) border-box;
    box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .3) inset,
    0 .5em 1em rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 1px hsla(0, 0%, 100%, .3);
  }

  .el-input.is-disabled /deep/ .el-input__inner {
    color: #000000;
  }
</style>
